<template>
  <div style="flex: 1">
    <div class="page">
      <div style="height: 610px">
        <a-table
          ref="tableRef"
          style="overflow-y: auto; width: 100%"
          :columns="tableColumns"
          :data-source="userList"
          :pagination="false"
          :sorter="sortInfo"
          :loading="loading"
          class="admin-table"
          @change="tableChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'createTime'">
              {{ dateFormat(record.createTime) }}
            </template>
            <template v-else-if="column.dataIndex == 'status'">
              <div v-if="record.status === '可用'" class="table__status">可用</div>
              <div v-else-if="record.status === '禁用'" class="table__status error">禁用</div>
            </template>

            <template v-else>
              {{ replaceEmptyStr(record[column.dataIndex as string]) }}
            </template>
          </template>
        </a-table>
        <g-pagination v-model:offset="pageForm.offset" v-model:limit="pageForm.limit" :total="pageForm.total" @change="getIPListData()" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'
  import { dateFormat } from 'g6-fn'
  import { onMounted, ref } from 'vue'

  import useList from '@/hooks/use-list'
  import { algoDepotApi } from '@/services/api'
  import { replaceEmptyStr } from '@/utils'
  import { filterTableColumns } from '@/utils/ant-component'
  const props = defineProps({
    pageForm: {
      type: Object,
      default: () => {
        return {}
      }
    }
  })
  const basicColumns = [
    {
      title: '调用IP',
      dataIndex: 'ip',
      minWidth: 120
    },
    {
      title: '算法服务名称',
      dataIndex: 'algorithmName',
      minWidth: 200
    },
    {
      title: '版本号',
      dataIndex: 'versionName',
      minWidth: 200
    },
    {
      title: '应用名称',
      dataIndex: 'appName',
      minWidth: 200
    },
    {
      title: '调用次数',
      dataIndex: 'total',
      isSort: true,
      width: 200
    },
    {
      title: '最后一次调用时间',
      dataIndex: 'last',
      isSort: true,
      width: 200
    }
  ]

  const tableColumns = ref(filterTableColumns(basicColumns))
  interface PageForm {
    algorithmId: string | number
    versionId: string | number
    appld: string | number
    callTimeStart: any
    callTimeEnd: any
    userTel: string
    columns: 'total' | 'last' | ''
    order: 'desc' | 'asc'
  }
  const {
    pageForm,
    dataList: userList,
    getDataList: getIPListData,
    loading,
    resetPageForm
  } = useList<PageForm, any>(algoDepotApi.IPList, {
    algorithmId: props.pageForm.algorithmId,
    versionId: props.pageForm.versionId,
    appld: props.pageForm.appld,
    userTel: props.pageForm.userTel,
    callTimeStart: props.pageForm.callTimeStart,
    callTimeEnd: props.pageForm.callTimeEnd,
    columns: '',
    order: 'desc'
  })

  const sortInfo = ref()

  // 时间
  const FIFTH_DAY = 14 * 24 * 60 * 60 * 1000 // 15天的毫秒数
  const rangeValue = ref<any>([dayjs(Date.now() - FIFTH_DAY), dayjs(Date.now())])

  const rest = () => {
    rangeValue.value = [dayjs(Date.now() - FIFTH_DAY), dayjs(Date.now())]

    resetPageForm({
      versionId: '',
      algorithmId: '',
      appld: '',
      userTel: '',
      columns: '',
      callTimeStart: dateFormat(rangeValue.value[0], 'YYYY-MM-DD 00:00:00'),
      callTimeEnd: dateFormat(rangeValue.value[1], 'YYYY-MM-DD 23:59:59')
    })
  }

  const tableRef = ref()
  const tableChange = (pagination: any, filters: any, sorter: any) => {
    pageForm.value.columns = sorter.field
    pageForm.value.order = sorter.order === 'ascend' ? 'asc' : 'desc'

    if (!sorter.order) {
      pageForm.value.columns = ''

      pageForm.value.order = 'asc'
    }
    getIPListData({ offset: 1 })
  }

  defineExpose({
    getIPListData,
    rest
  })
  onMounted(() => {
    getIPListData()
  })
</script>

<style lang="less" scoped>
  .page {
    position: relative;
    // overflow-y: scroll;
    width: 100%;
    height: 656px;

    .table__body {
      overflow-y: auto;
    }

    .pagination {
      position: fixed;
      bottom: 46px;
    }
  }
</style>
